import 'package:blurb/common/routers/names.dart';
import 'package:blurb/common/store/user_store.dart';
import 'package:blurb/common/values/svg.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../common/values/images.dart';
import 'package:provider/provider.dart';
import '../../common/store/topic_store.dart';
import 'package:flutter_mobx/flutter_mobx.dart';

class TopicPage extends StatelessWidget {
  const TopicPage({super.key});

  @override
  Widget build(BuildContext context) {
    final topicStore = Provider.of<TopicStore>(context);
    return Observer(
      builder: (_) => Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage(MIP.background),
              fit: BoxFit.cover,
            ),
          ),
          child: SafeArea(
            child: Column(
              children: [
                // 顶部导航栏
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      IconButton(
                        icon: Icon(Icons.arrow_back_ios, color: Colors.white),
                        onPressed: () => Navigator.of(context).pop(),
                      ),
                      Text(
                        'topic',
                        style: GoogleFonts.racingSansOne(
                          fontSize: 24.sp,
                          color: Colors.white,
                        ),
                      ),
                      IconButton(
                        icon: Icon(MSI.add, color: Colors.white),
                        onPressed: () {
                          // 判断是否登录
                          final userStore = Provider.of<UserStore>(context, listen: false);
                          if (userStore.currentUser != null) {
                            GoRouter.of(context).push(RNS.topicPublish);
                          } else {
                            _showLoginDialog(context);
                          }
                        },
                      ),
                    ],
                  ),
                ),
                // 内容区域
                Expanded(
                  child: topicStore.isLoading
                      ? Center(child: CircularProgressIndicator(color: Color(0xFF60C3FF)))
                      : SingleChildScrollView(
                          child: Padding(
                            padding: EdgeInsets.all(16.w),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                // Hot Topics
                                Text(
                                  'Hot Topics',
                                  style: GoogleFonts.racingSansOne(
                                    fontSize: 24.sp,
                                    color: Colors.white,
                                  ),
                                ),
                                SizedBox(height: 16.h),
                                ...topicStore.hotTopics.map((topic) => _buildTopicCard(
                                  topic: topic,
                                  iconPath: MIP.topicGreen,
                                  arrowPath: MIP.rightArrowGreen,
                                  context: context,
                                )),
                                SizedBox(height: 32.h),
                                // All Topics
                                Text(
                                  'All Topics',
                                  style: GoogleFonts.racingSansOne(
                                    fontSize: 24.sp,
                                    color: Colors.white,
                                  ),
                                ),
                                SizedBox(height: 16.h),
                                ...topicStore.topics.map((topic) => _buildTopicCard(
                                  topic: topic,
                                  iconPath: MIP.topicBlue,
                                  arrowPath: MIP.rightArrowBlue,
                                  context: context,
                                )),
                              ],
                            ),
                          ),
                        ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
  
  Widget _buildTopicCard({
    required topic,
    required String iconPath,
    required String arrowPath,
    required BuildContext context,
  }) {
    return GestureDetector(
      onTap: () {
        GoRouter.of(context).push(RNS.topicDetail + '?id=${topic.id}');
      },
      child: Container(
        margin: EdgeInsets.only(bottom: 12.h),
        decoration: BoxDecoration(
          color: const Color(0xFF1F1F21),
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Padding(
          padding: EdgeInsets.all(16.w),
          child: Row(
            children: [
              Image.asset(iconPath, width: 36.w, height: 36.w),
              SizedBox(width: 12.w),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      topic.title,
                      style: GoogleFonts.racingSansOne(
                        fontSize: 18.sp,
                        color: Colors.white,
                      ),
                    ),
                    SizedBox(height: 4.h),
                    Text(
                      topic.description,
                      style: TextStyle(
                        fontSize: 14.sp,
                        color: Colors.white70,
                      ),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
              SizedBox(width: 8.w),
              Image.asset(arrowPath, width: 24.w, height: 24.w),
            ],
          ),
        ),
      ),
    );
  }
  // 显示登录提示对话框
  void _showLoginDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        backgroundColor: const Color(0xFF1F1F21),
        title: Text(
          'Please login first',
          style: GoogleFonts.racingSansOne(
            color: Colors.white,
            fontSize: 24.sp,
          ),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text(
              'Cancel',
              style: GoogleFonts.racingSansOne(
                color: Colors.white70,
                fontSize: 18.sp,
                fontWeight: FontWeight.normal,
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              GoRouter.of(context).push(RNS.guide);
            },
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.h),
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  begin: Alignment(0.50, 0.00),
                  end: Alignment(0.50, 0.96),
                  colors: [Color(0xFF60C3FF), Color(0xFFAADEFC)],
                ),
                borderRadius: BorderRadius.circular(30.r),
              ),
            child: Text(
              'Go to login',
              style: GoogleFonts.racingSansOne(
                color: Colors.white,
                fontSize: 18.sp,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}